<template>
  <div class="box">
    <div class="leftMenu" style="background: #eaedf2">
      <div
        :class="{ active: pageChoose == item.id }"
        v-for="(item, index) in anchorList"
        :key="index"
        @click="chooseStatus(item.id, index)"
      >
        <img :src="item.imageurlact" v-if="pageChoose !== item.id" />
        <img :src="item.imageurl" v-if="pageChoose == item.id" />
        <div class="listTitle">{{ item.title }}</div>
      </div>
    </div>
    <div class="hid-scroll-bar">
      <div
        style="display: flex; flex-direction: column"
        class="scroll-box"
        id="scroll-box"
      >
        <div class="mainMessage" id="anchor1">
          <div class="top" style="display: flex">
            <span>基本信息</span>
            <div />
          </div>
          <div style="display: flex; margin-top: 40px;justify-content:space-between">
            <div style="margin-right: 150px">
              <p>姓名</p>
              <el-input
                style="margin-bottom: 30px; width: 400px; height: 40px"
                v-model="form.memberName"
              ></el-input>
              <p style="margin-bottom: 24px">性别</p>
              <el-radio-group v-model="form.memberSex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="0">女</el-radio>
              </el-radio-group>
            </div>
          <div>
            <el-upload
              class="avatar-uploader"
              :action="uploadImgUrl"
              :show-file-list="false"
              :on-success="handleChange"
            >
              <img v-if="form.avatar" :src="form.avatar" class="avatar" style="width:100px;height:120px;" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <el-button
                slot="trigger"
                size="small"
                type="primary"
                class="button"
                @click="changeImage()"
                >上传头像</el-button
              >
            </el-upload>
          </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;
            "
          >
            <div>
              <p>出生年月</p>
              <div>
                <el-select
                  v-model="bir_year"
                  style="width: 140px; height: 40px"
                  placeholder="年"
                  @change="changeDay()"
                >
                  <el-option
                    v-for="(item, index) in 60"
                    :key="index"
                    :label="index + 1950"
                    :value="index + 1950"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="bir_mon"
                  style="width: 115px; height: 40px; margin-left: 12px"
                  placeholder="月"
                  @change="changeDay()"
                >
                  <el-option
                    v-for="(item, index) in 12"
                    :key="index"
                    :label="index + 1"
                    :value="index + 1"
                  >
                  </el-option>
                </el-select>
                <el-select
                  v-model="bir_day"
                  style="width: 115px; height: 40px; margin-left: 12px"
                  placeholder="日"
                >
                  <el-option
                    v-for="(item, index) in day"
                    :key="index"
                    :label="index + 1"
                    :value="index + 1"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div>
              <p>民族</p>
              <el-select
                v-model="form.memberNation"
                style="width: 400px; height: 40px"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in memberNations"
                  :key="index"
                  :label="item.content"
                  :value="item.cid"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;
            "
          >
            <div>
              <p>政党</p>
              <el-select
                v-model="form.politicalLandscape"
                style="width: 216px; height: 40px; margin-right: 12px"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in governments"
                  :key="index"
                  :label="item.content"
                  :value="item.cid"
                >
                </el-option>
              </el-select>
              <el-input
                v-if="form.politicalLandscape == 114"
                placeholder="其他政党"
                v-model="form.otherPolitical"
                style="width: 172px; height: 40px"
                :disabled="form.politicalLandscape != 114"
              ></el-input>
            </div>
            <div>
              <p>身份证号</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.idCard"
              ></el-input>
            </div>
          </div>
          <div style="margin-bottom: 30px">
            <p style="margin-bottom: 30px">文化程度</p>
            <el-radio-group v-model="form.educationalLevel">
              <el-radio label="高中"></el-radio>
              <el-radio label="中专"></el-radio>
              <el-radio label="大学专科"></el-radio>
              <el-radio label="大学本科"></el-radio>
              <el-radio label="硕士研究生"></el-radio>
              <el-radio label="博士"></el-radio>
            </el-radio-group>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;
            "
          >
            <div>
              <p>工作单位</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.workUnit"
              ></el-input>
            </div>
            <div>
              <p>职务</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.duties"
              ></el-input>
            </div>
          </div>
          <div style="margin-bottom: 30px">
            <p style="margin-bottom: 30px">第六届任职情况</p>
            <div>
              <el-radio-group v-model="form.employmentSituation">
                <el-radio label="会长"></el-radio>
                <el-radio label="副会长"></el-radio>
                <el-radio label="理事"></el-radio>
                <el-radio label="监事长"></el-radio>
                <el-radio label="监事"></el-radio>
                <el-radio label="秘书长"></el-radio>
                <el-radio label="会员"></el-radio>
              </el-radio-group>
            </div>
          </div>
          <div style="margin-bottom: 30px">
            <p>现任社会主要职务</p>
            <table border="1" class="table" width="660px" cellspacing="0">
              <tr
                align="center"
                height="40px"
                cellspacing="0"
                class="mainDuties"
              >
                <td width="340px">社会组织</td>
                <td width="210px">职务</td>
                <td width="100px" colspan="2">操作</td>
              </tr>
              <tr
                align="center"
                height="60px"
                cellspacing="0"
                v-for="(item, index) in form.mainDuties"
                :key="index"
              >
                <td width="340px">
                  <el-input
                    v-model="item.organization"
                    class="input"
                    style="width: 300px"
                  />
                </td>
                <td width="210px">
                  <el-input
                    v-model="item.duties"
                    class="input"
                    style="width: 170px"
                  />
                </td>
                <td width="100px" style="color: #2854b7">
                  <i class="el-icon-caret-top" @click="up(item)"></i>
                  <i class="el-icon-caret-bottom" @click="down(item)"></i>
                </td>
                <td
                  width="100px"
                  style="color: #2854b7"
                  @click="getDelDuties(item.did)"
                >
                  <i class="el-icon-delete-solid"></i>删除
                </td>
              </tr>
              <tr align="center" height="60px" cellspacing="0">
                <td width="340px">
                  <el-input
                    v-model="newOrganization"
                    class="input"
                    placeholder="请输入新添的组织名称"
                    style="width: 300px"
                  />
                </td>
                <td width="210px">
                  <el-input
                    v-model="newDuties"
                    class="input"
                    placeholder="请输入新添的职务"
                    style="width: 170px"
                  />
                </td>
                <td width="100px" style="color: #2854b7">
                  <i class="el-icon-caret-top" @click="up(item)"></i>
                  <i class="el-icon-caret-bottom" @click="down(item)"></i>
                </td>
                <td width="100px" style="color: #2854b7">
                  <i class="el-icon-delete-solid"></i>删除
                </td>
              </tr>
            </table>
            <button
              style="
                width: 100px;
                height: 36px;
                background: #2854b7;
                color: white;
                border: none;
                outline: none;
                margin-top: 20px;
              "
              @click="getSaveDuties"
            >
              添加
            </button>
            <button
              style="
                width: 100px;
                height: 36px;
                background: #2854b7;
                color: white;
                border: none;
                outline: none;
                margin-top: 20px;
                margin-left: 20px;
              "
              @click="toSaveDuties()"
            >
              保存
            </button>
          </div>

          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;
            "
          >
            <div>
              <p>手机</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.phone"
              ></el-input>
            </div>
            <div>
              <p>办公电话</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.tel"
              ></el-input>
            </div>
          </div>

          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;
            "
          >
            <div>
              <p>传真</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.facsimile"
              ></el-input>
            </div>
            <div>
              <p>电子邮箱</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.email"
              ></el-input>
            </div>
          </div>

          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;
            "
          >
            <div>
              <p>通信地址</p>
              <el-cascader
                @change="getAddress"
                style="width: 400px; height: 40px"
                v-model="communicationAddress"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
              >
              </el-cascader>
            </div>
            <div>
              <p>详细地址</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.address"
              ></el-input>
            </div>
          </div>

          <div style="margin-bottom: 30px">
            <p>邮政编码</p>
            <el-input
              style="width: 400px; height: 40px"
              v-model="form.zipCode"
            ></el-input>
          </div>

          <div style="margin-bottom: 30px">
            <p>兴趣爱好</p>
            <el-checkbox-group v-model="form.hobbys">
              <el-checkbox
                :label="item.cid"
                v-for="(item, index) in hobby"
                style="margin-bottom: 20px"
                :key="index"
                >{{ item.content }}</el-checkbox
              >
              <el-input
                v-model="form.otherHobby"
                v-show="this.form.hobbys.indexOf(125) !== -1"
                style="width: 195px; height: 40px"
              />
            </el-checkbox-group>
          </div>

          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 30px;
            "
          >
            <div>
              <p>秘书/助理姓名</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.secretary"
              ></el-input>
            </div>
            <div>
              <p>秘书/助理手机</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.secretaryPhone"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="companyMessage" id="anchor2">
          <div class="top" style="display: flex; margin-bottom: 40px">
            <span>企业信息</span>
            <div />
          </div>

          <div style="margin-bottom: 40px">
            <div>
              <p>所属行业</p>
              <el-select
                v-model="form.industries"
                style="width: 840px; height: 40px"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in industrys"
                  :key="index"
                  :label="item.content"
                  :value="item.cid"
                >
                </el-option>
              </el-select>
            </div>

            <div style="margin-bottom: 40px">
              <p>企业性质</p>
              <el-radio-group v-model="form.enterpriseNature">
                <el-radio
                  :label="item.cid"
                  v-for="(item, index) in enterpriseNatures"
                  :key="index"
                  >{{ item.content }}</el-radio
                >
              </el-radio-group>
            </div>

            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 30px;
              "
            >
              <div>
                <p>主营业务</p>
                <el-input
                  style="width: 400px; height: 40px"
                  v-model="form.mainBusiness"
                ></el-input>
              </div>
              <div>
                <p>营业执照注册号</p>
                <el-input
                  style="width: 400px; height: 40px"
                  v-model="form.businessNo"
                ></el-input>
              </div>
            </div>

            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 30px;
              "
            >
              <div>
                <p>企业组织代码</p>
                <el-input
                  style="width: 400px; height: 40px"
                  v-model="form.enterpriseCode"
                ></el-input>
              </div>
              <div>
                <p>注册资金(万)</p>
                <el-input
                  @blur="check(form.registeredCapital)"
                  onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
                  style="width: 400px; height: 40px"
                  v-model="form.registeredCapital"
                ></el-input>
              </div>
            </div>

            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 30px;
              "
            >
              <div>
                <p>固定资产总额(万)</p>
                <el-input
                  style="width: 400px; height: 40px"
                  onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
                  v-model="form.fixedTotalAssets"
                ></el-input>
              </div>
              <div>
                <p>上年度销售收入(万)</p>
                <el-input
                  style="width: 400px; height: 40px"
                  v-model="form.lastSalesRevenue"
                  onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
                ></el-input>
              </div>
            </div>

            <div
              style="
                display: flex;
                justify-content: space-between;
                margin-bottom: 30px;
              "
            >
              <div>
                <p>上年度纳税额(万)</p>
                <el-input
                  style="width: 400px; height: 40px"
                  v-model="form.lastPayTaxes"
                  onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
                ></el-input>
              </div>
              <div style="margin-bottom: 30px">
                <p>公司网址</p>
                <el-input
                  style="width: 400px; height: 40px"
                  v-model="form.companyWebsite"
                ></el-input>
              </div>
            </div>

            <div style="margin-bottom: 30px">
              <p>员工人数</p>
              <el-input
                style="width: 400px; height: 40px"
                v-model="form.staffNumber"
              ></el-input>
            </div>

            <div style="margin-bottom: 30px">
              <p>企业符合下列哪些条件</p>
              <el-checkbox-group v-model="form.companyEligibles">
                <el-checkbox
                  :label="item.cid"
                  v-for="(item, index) in companyEligibles"
                  :key="index"
                >
                  <span
                    style="
                      font-family: Alibaba PuHuiTi;
                      font-weight: 400;
                      font-size: 15px;
                      color: #0e0e0e;
                    "
                    >{{ item.content }}</span
                  >
                </el-checkbox>
              </el-checkbox-group>
            </div>

            <div style="margin-bottom: 30px">
              <p>个人符合下列哪些条件</p>
              <el-checkbox-group
                v-model="form.personalEligibles"
                style="display: flex; flex-direction: column"
              >
                <el-checkbox
                  :label="item.cid"
                  v-for="(item, index) in personalEligibles"
                  :key="index"
                >
                  <span
                    style="
                      font-family: Alibaba PuHuiTi;
                      font-weight: 400;
                      font-size: 15px;
                      color: #0e0e0e;
                    "
                    >{{ item.content }}</span
                  >
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div class="otherMessage" id="anchor3">
          <div class="top" style="display: flex; margin-bottom: 40px">
            <span>其他信息</span>
            <div />
          </div>
          <div style="margin-bottom: 30px">
            <p class="title_p">个人简历及获奖情况</p>
            <el-input
              style="width: 870px"
              :rows="6"
              type="textarea"
              placeholder="请输入内容"
              v-model="form.resume"
            >
            </el-input>
          </div>
          <div style="margin-bottom: 30px">
            <p class="title_p">企业简介及获奖情况</p>
            <el-input
              style="width: 870px"
              :rows="6"
              type="textarea"
              placeholder="请输入内容"
              v-model="form.companyIntroduction"
            >
            </el-input>
          </div>
          <div style="margin-bottom: 30px">
            <p class="title_p">社会贡献(近三年捐赠情况)</p>
            <el-input
              style="width: 870px"
              :rows="6"
              type="textarea"
              placeholder="请输入内容"
              v-model="form.socialContribution"
            >
            </el-input>
          </div>
          <div style="margin-bottom: 30px">
            <p class="title_p">对第六届协会建设的建议</p>
            <el-input
              style="width: 870px"
              :rows="6"
              type="textarea"
              placeholder="请输入内容"
              v-model="form.proposal"
            >
            </el-input>
          </div>
        </div>
        <div class="supplyMessage" id="anchor4">
          <div class="top" style="display: flex">
            <span>补充信息</span>
            <div />
          </div>
          <div>
            <p class="title_p">关键字</p>
            <div>
              <el-input
                style="width: 400px; height: 40px"
                placeholder="请输入关键字"
                v-model="keyword"
              ></el-input>
              <button
                class="button"
                style="
                  margin-left: 14px;
                  margin-top: 0px;
                  width: 100px;
                  height: 40px;
                "
                @click="getaddKeyword()"
              >
                添加
              </button>
            </div>
            <div style="margin-top: 20px">
              <el-tag
                :key="index"
                class="tag"
                v-for="(item, index) in keywordList"
                closable
                @close="delTag(item.kid)"
              >
                {{ item.keyword }}
              </el-tag>
            </div>
          </div>

          <div style="text-align: center; margin-top: 50px">
            <el-button
              size="medium"
              @click="back()"
              style="
                width: 80px;
                line-height: 20px;
                height: 40px;
                background: #e1e2e5;
              "
              >取消</el-button
            >
            <el-button
              type="primary"
              size="medium"
              @click="submitForm"
              style="
                margin-left: 30px;
                width: 110px;
                height: 40px;
                background: #2854b7;
                border: none;
              "
              >保存修改</el-button
            >
          </div>
          <div style="height: 500px"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  modifyMember,
  getCondition,
  getMemberInfo,
  dutiesList,
  saveDuties,
  delDuties,
  addKeyword,
  delKeyword,
  keywordList,
  updateDuties,
} from "@/api/member";
import index from "../../../components/Breadcrumb/index.vue";
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
  components: { index },
  data() {
    return {
      // 标题
      open: false,
      //个人条件
      personalEligibles: [],
      //企业条件
      companyEligibles: [],
      //所属行业
      industrys: [],
      //企业性质
      enterpriseNatures: [],
      //地址
      communicationAddress: [],
      //民族
      memberNations: [],
      //政党列表
      governments: [],
      //兴趣爱好
      hobby: [],
      //选中页面
      pageChoose: "anchor1",
      //出生年月
      bir_year: "",
      bir_mon: "",
      bir_day: "",
      //新增社会主要职务
      newOrganization: "",
      newDuties: "",
      //关键词列表
      keywordList: "",
      //新的关键词
      keyword: "",
      //上传图片地址
      uploadImgUrl: "",
      //表单数据
      form: {
        radio: "",
        companyIntroduction: "",
        mid: "",
        browseNumber: "",
        commodityPrice: "",
        businessNo: "",
        communicationAddress: [],
        memberBirthday: "",
        avatar: "",
        companyWebsite: "",
        educationalLevel: "",
        enterpriseCode: "",
        enterpriseNature: "",
        facsimile: "",
        fixedTotalAssets: "",
        hobbys: [],
        idCard: "",
        industries: [],
        lastPayTaxes: "",
        lastSalesRevenue: "",
        mainBusiness: "",
        mainDuties: [],
        memberHometown: "",
        memberName: "",
        memberNation: "",
        memberNo: "",
        memberSex: "",
        personalEligibles: [],
        companyEligibles: [],
        phone: "",
        politicalLandscape: "",
        proposal: "",
        refuseRemark: "",
        registeredCapital: "",
        resume: "",
        secretary: "",
        secretaryPhone: "",
        socialContribution: "",
        staffNumber: "",
        status: "",
        tel: "",
        zipCode: "",
        applicationTime: "",
        employmentSituation: "",
        otherHobby: "",
        otherPolitical: "",
        opid: "",
      },
      options: regionData,
      //页码
      num: "",
      size: "",
      // 默认选中的锚点的key值
      activeStep: "",
      offsetTop: 0,
      day: 30,
    };
  },
  computed: {
    scrollFn() {
      return this.Debounce(this.scroll);
    },
    anchorList() {
      // 锚点列表
      return [
        {
          id: "anchor1",
          name: "锚点1",
          imageurl: require("../../../assets/peopleMessage_on.png"),
          imageurlact: require("../../../assets/peopleMessage_off.png"),
          title: "基本信息",
        },
        {
          id: "anchor2",
          name: "锚点2",
          imageurl: require("../../../assets/companyMessage_on.png"),
          imageurlact: require("../../../assets/companyMessage_off.png"),
          title: "企业信息",
        },
        {
          id: "anchor3",
          name: "锚点3",
          imageurl: require("../../../assets/otherMessage_on.png"),
          imageurlact: require("../../../assets/otherMessage_off.png"),
          title: "其他信息",
        },
        {
          id: "anchor4",
          name: "锚点4",
          imageurl: require("../../../assets/supplyMessage_on.png"),
          imageurlact: require("../../../assets/supplyMessage_off.png"),
          title: "补充信息",
        },
      ];
    },
    modules() {
      // 模块列表
      return [
        { id: "anchor1", title: "模块1" },
        { id: "anchor2", title: "模块2" },
        { id: "anchor3", title: "模块3" },
        { id: "anchor4", title: "模块4" },
      ];
    },
  },
  created() {
    this.judge();
    this.getCondition();
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFn, true);
  },
  beforeDestroy() {
    window.addEventListener("scroll", this.scrollFn, false);
  },
  methods: {
    Debounce(fn, t) {
      let delay = t || 100;
      let timer;
      return function () {
        let args = arguments;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          timer = null;
          fn.apply(this, args);
        }, delay);
      };
    },
    //判断日期
    changeDay() {
      if (this.bir_mon == 2) {
        if (this.bir_year % 4 == 0) {
          this.day = 29;
          return;
        } else {
          this.day = 28;
          return;
        }
      } else if ([1, 3, 5, 7, 8, 10, 12].indexOf(this.bir_mon) == -1) {
        this.day = 30;
        return;
      } else {
        this.day = 31;
        return;
      }
    },

    //改变边框栏
    chooseStatus(id, index) {
      this.pageChoose = id;
      this.activeStep = id; // 设置选中的锚点为当前点击的
      const box = document.getElementById("scroll-box");
      let scrollItem = document.getElementById(id);
      // 锚点对应的模块与最近的一个具有定位的祖宗元素顶部的距离
      this.offsetTop = scrollItem.offsetTop;
      box.scrollTo({
        top: scrollItem.offsetTop,
        behavior: "smooth",
      });
    },
    scroll() {
      const box = document.getElementById("scroll-box");
      // 若当前设置的滚动高度大于实际滚动的高度，即为锚点跳转，不再设置选中的锚点
      if (this.offsetTop > box.scrollTop) {
        this.offsetTop = 0;
        return;
      }
      let totalH = 0;
      this.anchorList.some((anchor) => {
        let scrollItem = document.getElementById(anchor.id); // 锚点对应的模块
        totalH = totalH + scrollItem.clientHeight;
        let judge = box.scrollTop < totalH;
        if (judge) {
          this.pageChoose = anchor.id;
          return true;
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        radio: "",
        mid: "",
        companyIntroduction: "",
        browseNumber: "",
        commodityPrice: "",
        businessNo: "",
        communicationAddress: [],
        memberBirthday: "",
        avatar: "",
        companyWebsite: "",
        educationalLevel: "",
        enterpriseCode: "",
        enterpriseNature: "",
        facsimile: "",
        fixedTotalAssets: "",
        hobbys: [],
        idCard: "",
        industries: [],
        lastPayTaxes: "",
        lastSalesRevenue: "",
        mainBusiness: "",
        mainDuties: [],
        memberHometown: "",
        memberName: "",
        memberNation: "",
        memberNo: "",
        memberSex: "",
        personalEligibles: [],
        companyEligibles: [],
        phone: "",
        politicalLandscape: "",
        proposal: "",
        refuseRemark: "",
        registeredCapital: "",
        resume: "",
        secretary: "",
        secretaryPhone: "",
        socialContribution: "",
        staffNumber: "",
        status: "",
        tel: "",
        zipCode: "",
        applicationTime: "",
        employmentSituation: "",
        otherHobby: "",
        otherPolitical: "",
        opid: "",
      };
    },
    judge() {
      let params = this.$route.query.key;
      getMemberInfo(params).then((res) => {
        if (res.code === 200) {
          this.communicationAddress = [];
          this.form = res.data;
          this.openid = res.data.openid;
          this.getDutiesList();
          this.getBirth(res.data.memberBirthday);
          this.getKeyWord();
          this.dealAddress(res.data.communicationAddress);
        }
      });
    },
    //获取职责列表
    getDutiesList() {
      let data = {
        memberNo: this.form.memberNo,
      };
      dutiesList(data).then((res) => {
        if (res.code === 200) {
          this.form.mainDuties = res.data;
          this.form.mainDuties.forEach((item, index) => {
            item.sort = index + 1;
            this.$set(item, "memberNo", this.form.memberNo);
            this.$set(item, "openid", this.openid);
          });
        }
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      //清空其他政党和爱好的数据
      if (this.form.hobbys.indexOf(125) == -1) {
        this.form.otherHobby = "";
      }
      if (this.form.politicalLandscape != "114") {
        this.form.otherPolitical = "";
      }
      this.form.memberBirthday =
        this.bir_year + "-" + this.bir_mon + "-" + this.bir_day;

      let params = {
        ...this.form,
      };
      modifyMember(params).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改信息成功",
            type: "success",
          });
          setTimeout(this.back(), 1000);
        } else {
          this.$message.error("修改失败");
        }
        this.reset();
      });
    },

    // 修改信息操作
    modifyMember() {
      let params = { ...this.form };
      modifyMember(params).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改信息成功",
            type: "success",
          });
          // setTimeout(this.back(),1000)
        } else {
          this.$message.error("修改失败");
        }
        this.reset();
      });
    },
    //返回页面操作
    back() {
      this.$router.push({
        path: "usermanage",
        query: { num: this.num, size: this.size },
      });
    },
    getCondition() {
      getCondition().then((res) => {
        if (res.code === 200) {
          this.companyEligibles = res.data.companyEligibles;
          this.personalEligibles = res.data.personalEligibles;
          this.industrys = res.data.industrys;
          this.enterpriseNatures = res.data.enterpriseNatures;
          this.hobby = res.data.hobbys;
          this.governments = res.data.governments;
          this.memberNations = res.data.memberNations;
          this.memberNations.forEach((item, index) => {
            item.cid = item.cid.toString();
          });
        }
      });
    },
    changeImage() {
      this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/common/upload";
    },
    handleChange(res) {
      this.form.avatar = res.url;
    },
    //选择删除主要职责
    getDelDuties(data) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delDuties(data).then((res) => {
            if (res.code == 200) {
              this.getDutiesList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //保存主要职责
    toSaveDuties() {
      let params = this.form.mainDuties;
      saveDuties(params).then((res) => {
        if (res.code == 200) {
          this.getDutiesList();
          this.$message({
            message: "保存成功",
            type: "success",
          });
        }
      });
    },
    //新增主要职责
    getSaveDuties() {
      if (this.newOrganization && this.newDuties) {
        this.form.mainDuties.push({
          duties: this.newDuties,
          organization: this.newOrganization,
          sort: this.form.mainDuties.length + 1,
          memberNo: this.form.memberNo,
          openid: this.openid,
        });
        let params = this.form.mainDuties;
        saveDuties(params).then((res) => {
          if (res.code == 200) {
            this.getDutiesList();
            this.newOrganization = "";
            this.newDuties = "";
          }
        });
      } else {
        this.$message({
          message: "清先输入新添数据再提交",
          type: "warning",
        });
      }
    },
    //职责上移
    up(data) {
      this.form.mainDuties[data.sort - 2].sort = data.sort;
      this.form.mainDuties[data.sort - 1].sort = data.sort - 1;
      this.form.mainDuties.sort((a, b) => a.sort - b.sort);
    },
    //职责下移
    down(data) {
      this.form.mainDuties[data.sort].sort = data.sort;
      this.form.mainDuties[data.sort - 1].sort = data.sort + 1;
      this.form.mainDuties.sort((a, b) => a.sort - b.sort);
    },
    //获取关键字
    getKeyWord() {
      this.memberNo = this.form.memberNo;
      let params = {
        memberNo: this.memberNo,
      };
      keywordList(params).then((res) => {
        this.keywordList = res.data;
      });
    },
    //删除关键词
    delTag(kid) {
      delKeyword(kid).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getKeyWord();
        }
      });
    },
    //添加关键词
    getaddKeyword() {
      let params = {
        memberNo: this.memberNo,
        keyword: this.keyword,
      };
      addKeyword(params).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.getKeyWord();
          this.keyword = "";
        }
      });
    },
    //获取地址
    getAddress(e) {
      let arr = e;
      let name = "";
      arr.map((item) => (name += CodeToText[item] + "-"));
      this.form.communicationAddress = name.substring(0, name.length - 1);
    },
    //获取生日
    getBirth(data) {
      if (data) {
        const a = data.split("-");
        this.bir_year = a[0];
        this.bir_mon = a[1];
        this.bir_day = a[2];
      }
    },
    //处理从接口获取到的数据
    dealAddress(data) {
      if (data) {
        const b = data.split("-");
        let arr1 = b[0];
        let arr2 = b[1];
        let arr3 = b[2];
        this.communicationAddress.push(
          TextToCode[arr1].code,
          TextToCode[arr1][arr2].code,
          TextToCode[arr1][arr2][arr3].code
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .avatar-uploader {
  display: flex;
  flex-direction: column-reverse;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.box {
  background-color: #f5f5f5;
  padding: 24px 24px 20px 24px;
  display: flex;
  height: calc(100vh - 84px);
}
.listTitle {
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  font-size: 16px;
  color: #a1a9af;
}
.title_p {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #4f5570;
}
.active {
  background: white;
  color: #2854b7;
  border-left: #2854b7 solid 3px;
}
.lastGrid {
  border-bottom: solid black 1px;
}
.grid {
  border-bottom: solid black 1px;
}
.input {
  border: none;
  outline: none;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #0e0e0e;
}
.button {
  width: 100px;
  height: 36px;
  background: #2854b7;
  color: white;
  border: none;
  outline: none;
  margin-top: 14px;
}
.font {
  font-size: 14px;
  color: #606266;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.leftMenu > div {
  width: 135px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top > span {
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  font-size: 16px;
  color: #000000;
  margin-left: 8px;
  width: 90px;
}
.top > div {
  border-bottom: 1px solid #e5e5e5;
  height: 15px;
  width: 850px;
  padding-bottom: -20px;
  margin-left: 15px;
}
.top::before {
  content: "";
  width: 3px;
  background: #2854b7;
  height: 20px;
  border-radius: 2px;
}
.supplyMessage,
.otherMessage,
.companyMessage,
.mainMessage {
  background: white;
  width: 1056px;
  padding: 50px 56px;
}
.mainDuties {
  background: #f4f5f7;
  border-radius: 2px 0px 0px 2px;
  border: 1px solid #cacdd5;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #607490;
}
.checkbox {
  font-family: Alibaba PuHuiTi;
  margin-right: 55px;
  margin-bottom: 20px;
  font-weight: 400;
  font-size: 15px;
  color: #0e0e0e;
}
.table {
  border: 1px solid #cacdd5;
  > tr {
    border: 1px solid #cacdd5;
    > td {
      border: 1px solid #cacdd5;
    }
  }
}
/*双重包裹，隐藏滚动条*/
.hid-scroll-bar {
  position: relative;
  width: 100%;
  // height: 49.4375rem;

  .scroll-box {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    position: absolute;
    background: white;
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
div > p {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #4f5570;
}
.tag {
  width: 103px;
  height: 38px;
  background: #eff3f9;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 15px;
  color: #2854b7;
  text-align: center;
  line-height: 38px;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #2854b7;
  border-color: #2854b7;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: #2854b7;
  border-color: #2854b7;
}
// ::v-deep .el-upload-list__item-name {
//   color: #606266;
//   display: none;
//   margin-right: 40px;
//   overflow: hidden;
//   padding-left: 4px;
//   text-overflow: ellipsis;
//   -webkit-transition: color 0.3s;
//   transition: color 0.3s;
//   white-space: nowrap;
// }
// ::v-deep .el-upload-list__item.is-success .el-upload-list__item-status-label {
//   display: none;
// }
// ::v-deep .el-upload-list--picture-card .el-upload-list__item {
//   overflow: hidden;
//   background-color: #fff;
//   border: 1px solid #c0ccda;
//   border-radius: 6px;
//   -webkit-box-sizing: border-box;
//   box-sizing: border-box;
//   width: 100px;
//   height: 120px;
//   margin: 0 8px 8px 0;
//   display: inline-block;
// }
</style>
